/**
 * Created by 陈国锋 on 2018/4/15.
 */
const path = require('path'); //引入路径 common.js规范 AMD require()  module.exports
const HtmlWebpackPlugin = require("html-webpack-plugin"); //引入这个插件 作用  自动生成dist文件的内容
//sea.js CMD模块规范 export {} import 
const CleanWebpackPlugin = require('clean-webpack-plugin'); //引入删除东西(清除)的插件
const webpack = require('webpack'); //引入webpack

const ExtractTextPlugin = require('extract-text-webpack-plugin'); //引入分离css的插件
module.exports = {
    //入口配置
    entry: { //对象的写法
        index: './src/javascript/index.js',
        //entry2: './src/index2.js' //可以有多个入口
        /*entry1:'./src/index.js'*/
        jquery: 'jquery',
        rem:'./src/javascript/rem.js'
    },
    //数组的写法  使用数组写入口文件

    //entry:['./src/index.js','./src/index2.js'],
    //出口配置
    output: {
        path: path.resolve(__dirname, 'dist'), //配置一个基础路径 根路径 绝对路径
        //filename:'bundle.js'
        filename: '[name].bundle.js' //属性名固定  注意不能错写成 './dist/bundle.js'
        //如果是多入口的话 要将路径改为 '[name].js'
        //意思就是 名字和入口的文件名字一样 index.html 要引入两个出口的文件

    },
    // mode:'development',//模式 这里设置了mode模式的话就不用在packpage.json的scripts中
    //设置build:'webpack --mode production'的‘--mode production’
    //module.rules在4.0代替loaders
    module: {
        rules: [{
                test: /\.css$/, //配置后缀名
                //use:['style-loader','css-loader']//使用的两个转换器
                //等价于
                //loader:['style-loader','css-loader']
                //也等价于
                /*use: [{
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    }
                ]*/
                //使用分离css插件的写法
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader',
                    publicPath: '../' //配置图片的路径
                })
            },
            {

                test: /\.(png|jpg|gif)$/,
                use: [{
                        loader: 'url-loader',
                        options: {
                            limit: 50, //图片的大小限制  小于50kb就转换成base64格式的图片 否则就变成路径图片
                            outputPath: 'images' //分离图片的文件夹 把图片放入相应的目录
                        }


                    } //下载的loader 可以不用引入file-loader
                ]
            }
        ]
    },
    //插件
    plugins: [
        //使用引入的插件 实例化 一会儿需要配置
        new HtmlWebpackPlugin({
            chunks: ['rem','index','jquery'], //属性是一个数组 数组的元素值是入口文件的属性名 而不是路径名
            //解决打包的html文件分别引入需要的文件 进行打包
            filename: 'index.html', //配置打包出去的文件  为index.html
            minify: { //这个属性是压缩的内容  在这里配置  

                collapseWhitespace: true, //合并空格   进行压缩
                removeAttributeQuotes: true //删除html文件里面的双引号 不会影响代码的执行
            },
            hash: true, //消除缓存  使用哈希产生随机码 唯一标识 就不会进行缓存 会把引入的文件加上一个随机的东西
            template: './src/index.html', //引入模板  就是src目录下的index.html
            title: '欢迎来到锦城数据实验中心' //也就是设置模板的title标记里面的内容标题  页面的标题
        }),
        //打包index2.html的文件 生成的文件也是index2.html文件
        /*new HtmlWebpackPlugin({
            chunks: ['entry2'], //属性是一个数组 数组的元素值是入口文件的属性名 而不是路径名
            //解决打包的html文件分别引入需要的文件 进行打包
            filename: 'index2.html', ////配置打包出去的dist文件  为index2.html
            minify: { //这个属性是压缩的内容  在这里配置  

                collapseWhitespace: true, //合并空格   进行压缩
                removeAttributeQuotes: true //删除html文件里面的双引号 不会影响代码的执行
            },
            hash: true, //消除缓存  使用哈希产生随机码 唯一标识 就不会进行缓存 会把引入的文件加上一个随机的东西
            template: './src/index2.html', //引入模板  就是src目录下的index.html
            title: 'index2的模板的标题' //也就是设置模板的title标记里面的内容标题  页面的标题
        }),*/
        //删除东西的插件实例化 使用
        new CleanWebpackPlugin(['dist']), //删除dist目录 作用？在输入打包命令的时候先回通过这个插件删除dist的文件目录
        //然后在进行更新重新添加dist的文件夹,达到一个先删除后更新的功能
        new webpack.HotModuleReplacementPlugin(), //实例webpack的这个自带的热更新的插件
        new ExtractTextPlugin('css/index.css'), //实例化引入css分离的插件 参数是打包出去的文件名
        new webpack.ProvidePlugin({ //使用这个自带的插件 暴露jquery出去
            $: 'jquery' //js代码直接可以使用jquery的写法了
        })
    ],
    optimization: { //分离jquery到单独的文件引入
        splitChunks: {
            cacheGroups: {
                vendor: {
                    chunks: 'initial',
                    name: 'jquery',//入口名称
                    enforce: true
                }
            }
        }
    },
    //服务器配置 代理 跨域
    devServer: {
        //设置基本的访问目录结构 contentBase
        contentBase: path.resolve(__dirname, 'dist'),
        //配置服务器的ip地址可以使用ip 或者localhost
        host: 'localhost', //主机名
        //服务端压缩是否开启？
        compress: true, //是否压缩
        hot: true, //热加载开启
        open: true, //配置自动打开浏览器运行  
        //配置服务端口号
        port: 8090

    }

};